<template>
  <el-drawer
    :title="title"
    v-model="formData.show"
    :modal="modal"
    :size="size"
    :direction="direction"
    :withHeader="withHeader"
    append-to-body
    :before-close="handleClose"
    modal-class="lc-drawer"
  >
    <DrawerBody
      ref="drawerBodyRef"
      v-bind="formData.data"
      :btnGroupVisible="false"
      :status="formData.status"
    />
    <div class="lc-buttonGroup lc-buttonGroup__center drawer-footer">
      <template v-if="formData.status === 'preview'">
        <el-button @click="handleClose">关闭</el-button>
      </template>
      <template v-else>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </div>
  </el-drawer>
</template>

<script setup>
import DrawerBody from './page/index.vue';
import { ref, reactive, computed } from 'vue';

const drawerBodyRef = ref();

defineOptions({
  name: 'Order-form'
});

const emit = defineEmits(['submit', 'close']);

const props = defineProps({
  formData: {
    type: Object,
    default: () => ({})
  }
});

let size = ref('50%');
let modal = ref(true);
let title = ref('新增');
let direction = ref('rtl');
let withHeader = ref(true);

async function handleSubmit() {
  if (props.formData.status === 'preview') {
    emit('submit', 'success');
  } else {
    try {
      const ret = await drawerBodyRef.value.handleClickSubmitForm();
      emit('submit', ret);
    } catch (e) {
      emit('submit', 'failed');
    }
  }
}

const handleClose = () => {
  emit('close');
  props.formData.show = false;
};
</script>

<style lang="scss" scoped></style>
